<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>儒雅随和</title>
    <link rel="stylesheet" href="./Css/Icon/iconfont.css">
    <link rel="stylesheet" href="./Css/Icon/iconfont.css">
    <link rel="stylesheet" href="./Css/reset.css">
    <link rel="stylesheet" href="./Css/Top.css">
    <link rel="stylesheet" href="./Css/Topa.css">
    <link rel="stylesheet" href="./Css/bp.css">
    <link rel="stylesheet" href="./Css/Fj.css">
    <link rel="stylesheet" href="./Css/Icon/iconfont.css">
    <link rel="stylesheet" href="./Css/Kp.css">
    <link rel="stylesheet" href="./Css/B1.css">
    <style>
        body{
            background-color: rgb(94, 55, 112);
            perspective: 2900px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 1700px;
        }
        .auto{
            position: relative;
            top: 300px;
            max-width: 1180px;
            height: 1480px;
            margin: auto;
            overflow: hidden;
        }
        .a1{
            width: 100%;
            height: 8.2%;
            
            transition: 1s;
        }
        .a1 img{
            border-radius: 50px;
            width: 100%;
            transition: 1s;
        }
        .auto:hover .a1{
            height: 6%;
            /* filter: blur(5px); */
            opacity: .7;
        }
        .auto .a1:hover{
            height: 30%;
            filter: blur(0px);
            opacity: 1;
        }
        .a{
            width: 10%;
            height: 400px;
            position: relative;
            top: 160px;
            margin: auto;
            transform-style: preserve-3d;
            animation: 60s turn infinite;
            transition: 2s;
        }
        .a:hover{
            animation-play-state: paused;
        }
        .a:active{
            animation: 1s turn infinite linear;
        }
        .a2{
            width: 150px;
            height: 320px;
            position: absolute;
            /* left: 500px; */
            right: 0;
            border-radius: 20px;
        }
        .a2 img{
            width: 100%;
            border-radius: 20px;
            opacity: .9;
        }
        .a2:nth-child(1) {
            transform: translateZ(300px);
            background-color: #c14c39;
        }
        .a2:nth-child(2) {
            transform: rotateY(51deg) translateZ(300px);
            background-color: #6e9c72;
        }
        .a2:nth-child(3) {
            transform: rotateY(102.5deg) translateZ(300px);
            background-color: #5e5f7a;
        }
        .a2:nth-child(4) {
            transform: rotateY(154deg) translateZ(300px);
            background-color: #f5eb98;
        }
        .a2:nth-child(5) {
            transform: rotateY(204.5deg) translateZ(300px);
            background-color: #50a3bc;
        }
        .a2:nth-child(6) {
            transform: rotateY(256deg) translateZ(300px);
            background-color: #f9a99a;
        }
        .a2:nth-child(7) {
            transform: rotateY(307.5deg) translateZ(300px);
            background-color: #f9a99a;
        }
        @keyframes turn {
            0%{
                transform:rotateY(0);
            }
            100%{
                transform:rotateY(360deg);
            }
        }
        @media (max-width: 1180px) {

            .auto:hover .a1{
            height: 8.2%;
        }
        .auto .a1:hover{
            height: 29%;
        }
        .left,.right,a{
            display: none;
        }
        }
        @media (max-width: 880px) {
            .auto:hover .a1{
            height: 8.3%;
        }
        .auto .a1:hover{
            height: 20%;
        }
        }
        @media (max-width: 730px) {
            .auto:hover .a1{
            height: 13%;
        }
        .auto .a1:hover{
            height: 15%;
        }
        }
        @media (max-width: 500px) {
            /* .a1{
                height: 10%;
            } */
            .auto:hover .a1{
            height: 8.1%;
        }
        .auto .a1:hover{
            height: 11%;
        }
        }
        @media (min-width: 1180px) {
            .a{
            width: 600px;
            left: -270px;
            /* background-color: #fff;   */
        }
        .a2{
            left: 222px;
        }
        }
        .left,.right{
            width: 300px;
            height: 500px;
            position: absolute;
            top: 100px;
            right: 120px;
            border-radius: 20px;
            transition: .4s;
        }
        .left img,.right img{
            width: 100%;
            border-radius: 20px;
        }
        a{
            text-decoration: none;
            color: #fff;
            width: 80px;
            height: 80px;
            background: rgb(51,51,51);
            border-radius: 50%;
            position:absolute;
            top: 260px;
            right: 500px;
            transition: .4s;
        }
        .iconfont{
            line-height: 80px;
            position: absolute;
            left: 22px;
            font-size: 38px;
        }
        a:hover{
            background-color: #fff;
            color: rgb(51,51,51);
        }
        a:hover~.right{
            opacity: 0;
        }
    </style>
</head>
<body>
    
    <div class="a">
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/Hg1pn.md.jpg"></div>
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/HgGmB.md.jpg"></div>
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/HgubN.md.jpg"></div>
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/HgaRR.md.jpg"></div>
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/HgUws.md.jpg"></div>
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/HgDrC.md.jpg"></div>
        <div class="a2"><img src="https://img.wenhairu.com/images/2022/01/22/HgWgS.md.jpg"></div>
    </div>
    <a href="./index.html"><i class="iconfont icon-back"></i></a>
    <div class="left">
        <img src="https://img.wenhairu.com/images/2022/01/22/Hg5lT.md.jpg">
    </div>
    <div class="right">
        <img src="https://img.wenhairu.com/images/2022/01/22/HgpOA.md.jpg">
    </div>
    <div class="auto">
        <div class="auto1">
            <div class="autot">
                <a href="index.html" class="autot1">
                    <span></span>
                    <i class="iconfont icon-kucunqingkuang"></i>
                </a>
            </div>
            <div class="autob">
                <ul class="bz">
                    <li><img src="https://img.wenhairu.com/images/2022/01/22/HgoRj.md.jpg" height="470px"></li>
                    <li><img src="https://img.wenhairu.com/images/2022/01/22/HgkCU.md.jpg" height="470px"></li>
                    <li><img src="https://img.wenhairu.com/images/2022/01/22/HgQr0.md.jpg" height="470px"></li>
                    <li><img src="https://img.wenhairu.com/images/2022/01/22/HgHgv.md.jpg" height="470px"></li>
                    <li><img src="https://img.wenhairu.com/images/2022/01/22/HgyUG.md.jpg" height="470px"></li>
                </ul>
            </div>
        </div>
   </div>
</body>
</html>